<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>山西光银信息技术有限公司-产品中心</title>
		<link rel="stylesheet" href="index.css">
		<style>
			.contact {
				background-color: #f3f3f3;
			}

			.center2 {
				width: 1100px;
				margin: 0 auto;
				display: flex;
				flex-direction: column;
				padding: 50px 0;
			}

			.center2 .title {
				width: 100%;
				position: relative;
			}

			.center2 .title>h2 {
				font-weight: 700;
				margin-bottom: 30px;

			}

			.center2 .title>h2:first-child {
				font-size: 80px;
				color: #e8e8e8;
			}

			.center2 .title>h2:last-child {
				font-size: 30px;
				color: #031434;
				position: absolute;
				left: 0;
				top: 65px;
			}

			.center2>ul {
				display: flex;
				flex-wrap: wrap;
				padding: 5px;
				text-align: center;
				margin: 40px 0 20px;
			}

			.center2>ul>li {
				width: 200px;
				border: 1px solid #ddd;
				padding: 10px 25px;
				margin: 0px 10px 5px;
				background-color: #fff;
			}

			.center2>ul>li.active {
				background-color: #031434;
				color: #fff;
			}

			.center2>ul>li:hover {
				background-color: #031434;
				color: #fff;
			}

			.center2 .pros {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 0 15px;
			}

			.center2 .pros>div {
				width: 250px;
				position: relative;
			}

			.center2 .pros>div>img {
				width: 100%;
				display: block;
			}

			.center2 .pros>div>p {
				width: 100%;
				text-align: center;
				font-size: 14px;
				line-height: 35px;
				visibility: hidden;
			}

			.center2 .pros>div:hover>p {
				visibility: visible;
				position: absolute;
				bottom: 35px;
				background-color: #2c60a4;
				color: #fff;
			}

			.center2 .pages {
				text-align: center;
			}

			.center2 .pages .page>span {
				border: 1px solid #858585;
				border-radius: 1px;
				color: #858585;
				padding: 2px 8px;
				margin: 0 2px;
			}

			.center2 .pages .page>span:hover {
				background-color: #2c60a4;
				color: #fff;
			}

			.center2 .pages .page>span.active {
				background-color: #2c60a4;
				color: #fff;
			}

			.center2 .pages>div:last-child {
				margin: 10px 0;
			}
		</style>
	</head>
	<body>
		<!--                     导航部分                                -->
		<div class="dh">
			<div class="center1">
				<div class="logo">
					<img src="../img/logo.jpg" />
				</div>
				<div class="dht">
					<ul>
						<li><a href="#">首页</a></li>
						<li><a href="#">关于我们</a></li>
						<li><a href="#">产品中心</a></li>
						<li><a href="#">新闻中心</a></li>
						<li><a href="#">联系我们</a></li>
					</ul>
				</div>
			</div>
		</div>
		<!--                  展示图                                      -->

		<div class="zst">
			<img src="../img/banner/banner002.jpg" alt="" />
		</div>

		<!--                    产品中心                                             -->
		<div class="contact">
			<div class="center2">
				<div class="title">
					<h2>PRODUCT CENTER</h2>
					<h2>产品中心</h2>
				</div>
				<ul>
					<li class="active">安普印</li>
					<li>理光</li>
					<li>爱普生</li>
					<li>投影机系列</li>
					<li>乐歌人体工学</li>
					<li>会议平板</li>
					<li>华录激光电视</li>
				</ul>
				<div class="pros">
					<div>
						<img src="../img/product/apy/product_apy001.jpeg" alt="">
						<p>黑白A3多功能******复合机SML-1130</p>
					</div>
					<div>
						<img src="../img/product/apy/product_apy002.jpeg" alt="">
						<p>彩色A3多功能******复合机SML-C1130</p>
					</div>
					<div>
						<img src="../img/product/apy/product_apy003.jpeg" alt="">
						<p>黑白A3多功能******复合机SML-1160</p>
					</div>
					<div>
						<img src="../img/product/apy/product_apy004.jpeg" alt="">
						<p>彩色A3多功能******复合机SML-C1160 </p>
					</div>
					<div>
						<img src="../img/product/apy/product_apy005.jpeg" alt="">
						<p>黑白A3多功能******复合机SML-1125 </p>
					</div>
					<div>
						<img src="../img/product/apy/product_apy006.jpeg" alt="">
						<p>黑白A3多功能******复合机SML-1140 </p>
					</div>
					<div>
						<img src="../img/product/apy/product_apy007.jpeg" alt="">
						<p>******增强型黑白复印机SCL-25 </p>
					</div>
					<div>
						<img src="../img/product/apy/product_apy008.jpeg" alt="">
						<p>彩色A3多功能******复合机SML-C1145 </p>
					</div>

				</div>
				<div class="pages">
					<div class="page">
						<span class="active">1</span>
						<span>2</span>
					</div>
					<div>
						<span>共9条</span>
					</div>
				</div>
			</div>
		</div>
		<!--             页脚部分                       -->
		<div class="footer">
			<!--             联系我们                       -->
			<div class="lxwm">
				<div class="center5">
					<div class="menu">
						<h2>COMPANY MENU</h2>
						<div>
							<div><a href="#">网站首页</a></div>
							<div><a href="#">关于我们</a></div>
							<div><a href="#">产品中心</a></div>
							<div><a href="#">新闻中心</a></div>
							<div><a href="#">联系我们</a></div>
						</div>
					</div>
					<div class="xinxi">
						<h2>CONTACT US</h2>
						<ul>
							<li>微信：sxgysmkj</li>
							<li>电话：13994258086</li>
							<li>座机：0351-7336578</li>
							<li>地址：太原市小店区南内环街324号</li>
						</ul>
					</div>
					<div>
						<img src="../img/weixin.jpg" />
					</div>
				</div>
			</div>
			<!--             底部信息                    -->
			<div class="wydb">
				<p>
					©2021 山西光银信息技术有限公司 备案号：晋ICP备13005719号 技术支持 -
					资海科技集团
				</p>
			</div>
		</div>
		<!--          置顶按钮             -->
		<div class="zhiding hide" id="gotop">
			<a href="#">
				<div></div>
			</a>
		</div>
		<script>
			///////////////  置顶按钮   ////////////////////////
			const gotop = document.getElementById('gotop')
			onscroll = function() {
				const y = document.body.scrollTop || document.documentElement.scrollTop
				if (y > 400) {
					gotop.classList.remove('hide')
				} else {
					gotop.classList.add('hide')
				}
			}
		</script>
	</body>
</html>
